<template>
	<el-dialog v-model="showDialog" title="编辑" width="30%">
		<el-form
			ref="deptFormRef"
			:model="state.formData"
			:rules="state.rules"
			label-width="80px"
		>
			<el-form-item label="组件名称" prop="parentId">
				<el-input v-model="state.formData.name" placeholder="选择上级部门" />
			</el-form-item>
			<el-form-item label="组件标签" prop="name">
				<el-input v-model="state.formData.code" placeholder="请输入部门名称" />
			</el-form-item>
			<el-form-item label="显示排序" prop="sort">
				<el-input-number
					v-model="state.formData.sort"
					controls-position="right"
					:min="0"
				/>
			</el-form-item>
			<el-form-item label="状态">
				<el-radio-group v-model="state.formData.status">
					<el-radio :label="1">正常</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="默认属性">
				<el-input
					v-model="state.formData.defaultProps"
					:rows="2"
					type="textarea"
					placeholder="请输入默认属性；示例：{ with: '80%',props: 'parentData' }"
				/>
			</el-form-item>
			<el-form-item label="备注">
				<el-input
					v-model="state.formData.defaultProps"
					:rows="2"
					type="textarea"
					placeholder="请输入备注"
				/>
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
				<el-button @click="closeDialog"> 取 消 </el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
defineOptions({
	name: 'CompsAdd',
	inheritAttrs: false
})
const showDialog = ref(false)
const state = reactive({
	formData: {
		id: 123,
		name: '列表组件',
		code: 'sbd-table',
		status: 1,
		sort: 1,
		defaultProps: ''
	},
	rules: {}
})

const handleSubmit = () => {
	showDialog.value = false
}

const closeDialog = () => {
	showDialog.value = false
}

const openDialog = () => {
	showDialog.value = true
}
defineExpose({
	openDialog
})
</script>
